<!-- 工作流 -->
<style lang="scss">
    .pro-crm-home-workflow{
        .workflow-body{
            background: #ffffff;
            padding: 0 20px;
            position: relative;
            .el-tabs__header{
                margin: 0;
                padding: 10px 0;
                .el-tabs__nav-wrap::after{
                    display: none;
                }
                .el-tabs__item.is-top{
                    line-height: 30px;
                    height:30px;
                    color:#386ad0;
                    &.is-active{
                        background: #386ad0;
                        color: #fff;
                        border-radius: 4px;
                        line-height: 30px;
                        height: 30px;
                    }
                    &.is-active:after{
                        display: none;
                    }
                }
            }
            .close,.resize{
                position: absolute;
                right: 30px;
                top: 20px;
                font-size: 12px;
                color: #cccccc;
                cursor: pointer;
                &:hover{
                    color:#2f6bcf;
                }
            }
            .resize{
                right: 60px;
            }
        }

        &.full-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            animation: unset;
            background: #f0f2f5;
            .workflow-body{
              background: #ffffff;
              position: relative;
              width: 1250px;
              margin: 0 auto;
              height: 100%;
              padding-top: 10px;
              .resize,
              .close {
                top: 35px;
              }
            }
        }
    }
</style>
<template>
  <div
    v-show="visible"
    :class="[fullScreen?'full-screen':'']"
    class="pro-crm-home-workflow"
  >
    <div class="workflow-body">
      <el-tabs v-model="activeTab">
        <!-- 循环模块 -->
        <el-tab-pane
          v-for="(item,index) in items"
          :key="index"
          :label="`${lang=='zh_CN'?item.text:item.entext}(${item.badge})`"
          :name="item.code"
          lazy
        >
          <item-view
            :ref="item.code"
            :keyword-label="lang=='zh_CN'?item.keywordLabel:item.enkeywordlabel"
            :menu-data="menuData"
            :page-size="pageSize"
            :type="item.code"
            @refreshBadge="refreshBadge"
            @refreshItem="refresh"
          />
        </el-tab-pane>
      </el-tabs>
      <i
        v-if="!isHideBtn"
        @click="changeFullScreen(!fullScreen)"
        :class=" fullScreen ? 'jeicon-minus':'jeicon-max' "
        class="jeicon resize"
      />
      <i
        v-if="!isHideBtn"
        @click="close"
        class="jeicon jeicon-error close"
      />
    </div>
  </div>
</template>
<script>
import VueI18n from 'vue-i18n';
import ItemView from './item_view';
import getLang from '../../assets/lang/mergeLang';

const i18n = new VueI18n({
  locale: JE.getCookies('je-local-lang') || 'zh_CN', // 语言标识
  messages: {
    zh_CN: getLang('zh', [{ name: '_workflow', data: require('./../../assets/lang/workflow/zh') }]), // 中文语言包
    en: getLang('en', [{ name: '_workflow', data: require('./../../assets/lang/workflow/en') }]), // 英文语言包
  },
});
export default {
  name: 'HomeWorkflow',
  components: { ItemView },
  props: {
    pageSize: {
      type: Number,
      default: 10,
    },
    isHideBtn: {
      type: Boolean,
      default: false,
    },
  },
  i18n,
  data() {
    return {
      fullScreen: false,
      visible: true,
      activeTab: 'PREAPPROV',
      menuData: [],
      items: [
        {
          text: '待我审批', entext: 'Pending approval', code: 'PREAPPROV', badge: 0, keywordLabel: '送交人', enkeywordlabel: 'Sender',
        },
        {
          text: '已办理', entext: 'Processed', code: 'APPROVED', badge: 0, keywordLabel: '处理人', enkeywordlabel: 'Reciver',
        },
        {
          text: '我的流程', entext: 'Business processes', code: 'OWNER', badge: 0, keywordLabel: '处理人', enkeywordlabel: 'Reciver',
        },
        {
          text: '延时处理', entext: 'Delay', code: 'DELAY', badge: 0, keywordLabel: '送交人', enkeywordlabel: 'Sender',
        },
      ],
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
    };
  },
  computed: {
  },
  mounted() {
    this.initMenuData();
  },
  methods: {
    refresh(code) {
      const code_ = code || this.items[0].code;
      this.$refs[code_] && this.$refs[code_][0].refresh();
    },
    setVisible(visible, type) {
      this.visible = visible;
      this.changeFullScreen(false);
      if (type) {
        this.activeTab = type.toLocaleUpperCase();
        this.refresh(this.activeTab);
      }
    },
    close() {
      const me = this;
      me.setVisible(false);
      me.$emit('doact', 'clearSelect');
    },
    /**
           * 全屏
           */
    changeFullScreen(fullScreen) {
      this.fullScreen = fullScreen;
      this.pageSize = this.fullScreen ? 30 : 10;
    },
    /**
           * 更新数据
           */
    refreshBadge(data) {
      const me = this;
      const badges = [data.preapprovCount, data.approvedCount, data.ownerCount, data.delayCount];
      for (let i = 0; i < badges.length; i++) {
        const item = me.items[i];
        const badge = badges[i] || 0;
        item.badge = badge;
        me.$set(me.items, i, item);
      }
      me.$emit('doact', 'refreshBadge', {
        type: 'WF',
        num: true,
        numObj: {
          preapprovCount: data.preapprovCount,
          approvedCount: data.approvedCount,
          ownerCount: data.ownerCount,
          delayCount: data.delayCount,
        },
      });
    },
    initMenuData() {
      const data = JE.ajax({
        url: '/je/jbpm/processInfo/getProcessTree',
        params: {
          tableCode: 'JE_CORE_PROCESSINFO',
          excludes: 'checked',
          sort: '[{"property":"SY_ORDERINDEX","direction":"ASC"}]',
          node: 'ROOT',
        },
      });
      this.menuData = data.children;
    },
  },
};
</script>
